<template>
    <div>
        <!-- <el-card class="!border-none" shadow="never">
            <el-page-header :content="$route.meta.title" @back="$router.back()"/>
        </el-card> -->
        <el-card class="!border-none" shadow="never">
            <div>
                <el-button type="primary" class="mb-4" @click="handleAdd">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
                    新增账号
                </el-button>
            </div>
            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号" type="index" min-width="120" />
                <el-table-column label="名称" min-width="180" prop="name"/>
                <el-table-column label="头像" min-width="160" prop="avatar">
                    <template #default="{ row }">
                        <div class="flex align-middle">
                            <el-image style="width: 38px; height: 38px"
                                    :src="row.avatar"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2" 
                                    fit="contain"
                                    :preview-teleported="true"
                                    :preview-src-list="[row.avatar]"></el-image>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="场地名称" min-width="180" prop="name"/>
                <el-table-column label="创建时间" min-width="190" prop="create_time"/>
                <el-table-column label="登录时间" min-width="190" prop="login_time"/>
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <popup ref="popupRef" :title="formData.id?'账号编辑':'账号添加'" width="500px" @confirm="handleConfirm" :async="true" @close="popupClose">
            <el-form ref="formRef" :model="formData" label-width="80px" :rules="formRules">
                <el-form-item label="昵称" prop="name">
                    <el-input v-model="formData.name" placeholder="请填写昵称" />
                </el-form-item>
                <el-form-item label="头像" prop="avatar">
                    <div class="w-80">
                        <div>
                            <material-picker v-model="formData.avatar" :limit="1"/>
                        </div>
                        <div class="form-tips">建议尺寸：200*200px</div>
                    </div>
                </el-form-item>
                <el-form-item label="账号" prop="account">
                    <el-input v-model="formData.account" maxlength="11" placeholder="请填写手机号" />
                </el-form-item>
                <el-form-item label="密码" :prop="formData.id?'':'password'">
                    <el-input v-model="formData.password" type="password" :placeholder="formData.id?`不修改密码请勿填写`:`请填写密码`" show-password />
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import { usePaging } from '@/hooks/usePaging'
import { adminList, saveAdmin, adminInfo } from '@/api/office/officePlace'
import type { FormInstance, FormRules } from 'element-plus'
import Popup from '@/components/popup/index.vue'

const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()

const route = useRoute()
const queryParams:any = reactive({
    place_id: ''
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: adminList,
    params: queryParams
})

const handleAdd = () => {
    popupRef.value?.open()
}
const validatePhone = (rule: any, value: any, callback: any) => {
  if (value == '') {
    callback(new Error('请填写账号'))
  } else if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error('请输入正确的手机号'))
  } else {
    callback()
  }
}
const formRules: FormRules = {
    name: [{required: true, message: '请填写昵称' }],
    avatar: [{required: true, message: '请上传头像' }],
    account: [{required: true, validator: validatePhone, trigger: 'blur'}],
    password: [{required: true, message: '请填写密码' }]
}
const formData:any = reactive({
    id: 0,
    name: '',
    avatar: '',
    account: '',
    place_id: '',
    password: ''
})
const handleConfirm = async () => {
    try {
        await formRef.value?.validate()
        await saveAdmin(formData);
        popupRef.value?.close()
        getLists();
    } catch (error) {
        
    }
}
const popupClose = () => {
    formRef.value?.resetFields()
    formData.id = 0;
}

const handleEdit = async(row:any) => {
    const res = await adminInfo({id: row.id});
    console.log(res)
    Object.keys(formData).forEach((key)=>{
        formData[key] = res.info[key];
    })
    formData.password = '';
    popupRef.value?.open()
}

if (route.query.id) {
   queryParams.place_id = route.query.id;
   formData.place_id = route.query.id;
   getLists();
}
</script>